<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人资料</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../../js/ajax.js"></script>
		<script src="html5plus://ready"></script>
		<script type="text/javascript" src="../../js/fanhui.js" ></script>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row style="background-color: #FF4444;padding: 10px;color: white;">
					<van-col span="10">
						<p @click="left()">
							<van-icon name="arrow-left"  />
						</p>
					</van-col>
					<van-col span="10">
						<p>个人资料</p>
					</van-col>
				</van-row>
			</header>
			<section>
				<van-cell-group>
					<van-cell title="" value="更换头像" @click="showAlert = true" is-link>
						<template slot="title">
							<img v-model="imgUrl" :src="imgUrl"  style="height:50px;width: 50px;border-radius: 80%;">
						</template>
					</van-cell>
					<van-cell title="昵称" :value="data.UserData.NickName" is-link @click="updateuser"></van-cell>
					<van-cell title="手机号" :value="data.UserData.Phone" is-link></van-cell>
				</van-cell-group>
				<van-dialog
				  v-model="show"
				  title="昵称"
				  show-cancel-button
				  @confirm="sure"
				  @cancel="exit"
				>
				  <van-field v-model="name" placeholder="请输入用户名" ></van-field>
				</van-dialog>	
			</section>
			<footer>
				<van-col class="com-footer">
					<van-actionsheet v-model="showAlert" :actions="actions" @select="onSelect" @cancel="onCancel" cancel-text="取消"></van-actionsheet>
				</van-col>
			</footer>
		</div>
	</body>
	<script>
		var user=JSON.parse(plus.storage.getItem("user"));//当前用户
		var vm = new Vue({
			el: "#app",
			data: {
				data: [ /*用户的所有数据*/
					
				],
				actions: [{
						id: 1,
						name: '拍照'
					},
					{
						id: 2,
						name: '从相册选取'
					}
				],
				imgUrl: user.UserData.AvatarImage,//头像
				showAlert: false,
				userKey: user.Key,
				name:user.UserData.NickName,//昵称
				show:false//修改name弹出
			},
			methods: {
				
				left(){//点击左侧按钮
					plus.webview.close(plus.webview.currentWebview());
				},
				sure()//修改用户名的确定
				{
					ajax({
						url:'http://dsapi.ysd3g.com/API/ChangeNickName',
						dataType:'jsonp',
						data:{
							key:user.Key,
							nickName:vm.name
						},
						success:function(res)
						{
							if(res.Error==false){
								vm.$toast("修改成功");
							}
							user.UserData.NickName=vm.name;
							plus.storage.setItem("user",JSON.stringify(user));
							plus.webview.currentWebview().reload();
							plus.webview.getWebviewById("My center").reload();//刷新页面
						}
					});
				},
				exit()//修改用户名的取消
				{
					vm.$toast("修改取消");
				},
				updateuser(){//修改用户 
					vm.show=true;
					
				},
				
				onSelect(item) { //修改头像
					if(item.id == 1) {
						var  cmr  =  plus.camera.getCamera();    
						cmr.captureImage(function (p) { 
							console.log(p);
							plus.io.resolveLocalFileSystemURL(p,  function(entry) {//获取手机本地的文件或对象 参数1：文件或目录的url地址 回调1：成功通过文件路径找到文件 回调2：没找到时的回调函数    
								console.log(entry);
								var imgUrl = entry.toLocalURL();//entry为成功请求到的目录或文件对象,toLocalURL:获取文件路径转换为本地路径URL地址
								vm.$dialog.confirm({
									title: '提示',
									message: '您确定上传该图片作为头像吗?'
								}).then(() => {
									var toast = vm.$toast.loading({
										duration: 0,
										forbidClick: true,
										message: '正在上传'
									});
									var task = plus.uploader.createUpload("http://dsapi.ysd3g.com/api/uploadavatarimage?key=" + vm.userKey + "", {
											method: "POST",
											blocksize: 204800,
											priority: 100
										}, //最大上传大小200k,任务优先级100
										function(t, status) {//上传任务完成回调函数，当上传任务提交完成时触发，成功或失败都会触发。
											//上传成功
											if(status == 200) {
												var responseText = JSON.parse(task.responseText);
												plus.storage.setItem("data.UserData.AvatarImage", responseText.AvatarImage);//头像上传成功重新赋值
												var userData = JSON.parse(plus.storage.getItem("keys")).UserData;
												userData.AvatarImage = responseText.AvatarImage; //头像上传成功重新赋值
												plus.storage.setItem("userData", JSON.stringify(userData));
												toast = vm.$toast.success("上传成功");
												plus.webview.getWebviewById("personal").reload(false);
												plus.webview.currentWebview().reload(false); //true 设置使用缓存，加快读取速度
											} else { //上传失败
											
												vm.$toast.fail("上传失败：" + status);
												vm.$toast.clear();
											}
										}
									);
									task.addFile(imgUrl, {//参数1:文件路径*本地文件路径。参数2:必选 要添加上传文件的参数，可通过此参数设置上传任务属性，如文件标识、文件名称、文件类型等。
										key: "imgUrl"
									});
									task.start();//
									vm.showAlert = false;
								}).catch(() => {
									vm.$toast("取消上传");
									// on cancel
								});        
							});      
						},  function(e) {}, {//失败后返回的回调方法
							index: 1,
							filename: "_doc/camera/"
						}); //选择主摄像头，路径保存到_doc/camera/下
						//plus.io.resolveLocalFileSystemURL( url, succesCB, errorCB );//通过url获取 _doc/camera/下的图片
					} else if(item.id == 2) {
						// 从相册中选择图片
						plus.gallery.pick(function(path) {
							console.log(path);
							//成功选择回调 path是图片路径
							vm.$dialog.confirm({
								title: '提示',
								message: '您确定上传该图片作为头像吗?'
							}).then(() => {
								var toast = vm.$toast.loading({
									duration: 0, // 持续展示 toast
									forbidClick: true, // 禁用背景点击
									message: '正在上传'
								});
								//开始上传任务
								var task = plus.uploader.createUpload("http://dsapi.ysd3g.com/api/uploadavatarimage?key=" + vm.userKey + "", {
										method: "POST",
										blocksize: 204800,
										priority: 100
									}, //最大上传大小200k,任务优先级100
									function(t, status) {
										//上传成功
										if(status == 200) {
											var responseText = JSON.parse(task.responseText);
											//plus.storage.setItem("imgUrl",responseText.AvatarImage);//头像上传成功重新赋值
											var userData = user.UserData;
											userData.AvatarImage = responseText.AvatarImage; //头像上传成功重新赋值
											plus.storage.setItem("user", JSON.stringify(user));														
											plus.webview.getWebviewById("personal").reload(false);
											plus.webview.currentWebview().reload(false);

										} else { //上传失败
											vm.$toast.fail("上传失败：" + status);
											vm.$toast.clear();
										}
									}
								);
								task.addFile(path, {
									key: "imgUrl"
								});
								task.start();
								vm.showAlert = false;
							}).catch(() => {
								// on cancel
							});
						}, function(e) {
							//选择图片错误回调
							var code = e.code; // 错误编码
							var message = e.message; // 错误描述信息
							vm.$toast.fail(message);
						}, {
							filter: "image"
						}); //filter 默认过滤其他文件，只剩图片
					} else {
						this.$toast.fail("选择了错误的选项!");
					}
				},
				onCancel() { //取消上传
					this.$toast.fail("取消上传");
				}
			},
			created: function() {
				_this = this;
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
				_this.data = plus.storage.getItem("user");
				_this.data = JSON.parse(_this.data); //字符串转json对象
				console.log(_this.data);
			}
		})
	</script>
</html>